<template>
	<br />
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  stripe
	  ref="multipleTable"
	   @selection-change="handleSelectionChange"
	   :header-cell-style="{background:'#eef1f6',color:'#606266'}"
	>
		<el-table-column prop="id" label="编号" sortable  width="100" />
		<el-table-column prop="description" label="活动名称" sortable />
		<el-table-column prop="startTime" label="开始时间" sortable />
		<el-table-column prop="endTime" label="结束时间" sortable />
		<el-table-column label="操作" width="200"> 
		   <template #default="scope">
			  <el-button type="plain" @click="addInit(scope.row.id)"
				>查看详情</el-button>
			  <el-button type="primary" @click="application(scope.row.id)" v-if="findResource('参加活动')">报名</el-button
			  >
			</template>				
		</el-table-column>
	</el-table>
	<el-pagination
	  small
	  background
	  layout="prev, pager, next"
		:page-size="pageSize"
		:page-count="pageCount"
		:current-page="currentPage"
		@current-change="haddlePageChange"
	/>
	<el-dialog v-model="dialogVisible" title="查看详情" width="60%" draggable>
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	      <el-form-item label="编号" prop="id">
	        <el-input v-model="form.id" readonly/>
	      </el-form-item>
	      <el-form-item label="活动名称" prop="description">
	        <el-input v-model="form.description" readonly/>
	      </el-form-item>
		  <el-form-item label="参与人数" prop="participantsNum">
		    <el-input v-model="form.participantsNum" readonly/>
		  </el-form-item>
		  <el-form-item label="开始时间">
		        <el-col :span="11">
		          <el-date-picker
		            v-model="form.startTime"
		            type="date"
		            placeholder="Pick a date"
		            style="width: 100%"
					readonly
		          />
		        </el-col>
			</el-form-item>
			<el-form-item label="结束时间">
		        <el-col :span="11">
		          <el-date-picker
		            v-model="form.endTime"
		            type="date"
		            placeholder="Pick a date"
		            style="width: 100%"
					readonly
		          />
		        </el-col>
		      </el-form-item>		
		  <el-form-item label="发起人">
			    <el-select v-model="form.teacher" value-key="name" placeholder="请选择" width="200px" disabled>
			  	  <el-option v-for="item in teacherOption"
						:key="item.id"
						:label="item.name"
						:value="item">
					</el-option>
				</el-select>
			  </el-form-item>
			<el-form-item label="审批人">
				<el-select v-model="form.leader" value-key="name" placeholder="请选择" width="200px" disabled>
					<el-option v-for="item in leaderOption"
						:key="item.id"
						:label="item.name"
						:value="item">
					</el-option>
				</el-select>
			</el-form-item>
	      <el-form-item label="活动状态">
	        <el-input v-model="form.state" readonly/>
	      </el-form-item> 
		  <el-form-item label="签到人数">
		    <el-input v-model="form.signedNum" readonly/>
		  </el-form-item> 
	   </el-form>
	</el-dialog>
</template>
<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
	import{ useRouter } from 'vue-router'
	let { proxy } = getCurrentInstance();

	let teacherOption=ref([]);
	let leaderOption=ref([]);
	let resourceDes='';
	let student_id = ref(0);
	let activity_id = ref(0);
	let sa=ref({
		"student":{
			"id":student_id
		},
		"activity":{
			"id":activity_id
		}
	})
	var tableData=ref([]);
	var pageCount=ref(0)//总页数
	var pageSize=ref(10)
	var currentPage=ref(1)
	let pagination=ref({
		"pagination":{
			"pageNo":currentPage,
			"pageSize":pageSize,
		}
	})
	function getTableData(){
	    proxy.$http.post("/activityReadByS",pagination.value,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			tableData.value=res.data.data;//把获取的服务端数据数组传递给tableData
			console.log(tableData.value)
			//总页数
			pageCount.value=res.data.totalPages;
		})
		.catch(err => {
			console.log(err)
		});
	}
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();
	}
	onMounted(()=>{
		getTableData();
		//findResource ();
	});
	
	function handleChange (item) {
		console.log('change', item)
	}
	function findResource (str) {
		resourceDes=window.sessionStorage.getItem("button_data")
		console.log(resourceDes)
		console.log(resourceDes.indexOf(str))
		return (resourceDes.indexOf(str)>=0)?true:false
	}

	let form=ref({});//修改或增加的一个对象	
	//对话框显示与否
	const dialogVisible = ref(false)
	function addInit(id){
		console.log(form.value)
		dialogVisible.value = true
		proxy.$http.get("/activityRead?id="+id,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			form.value=res.data;//把获取的服务端数据数组传递
		})
		proxy.$http.get("/findAllTN",{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			teacherOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
		proxy.$http.get("/findAllLN",{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			leaderOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
	}
	//报名提交
	function application(id){
		student_id.value=parseInt(window.sessionStorage.getItem("userId"))
		activity_id.value=id
		sa.value.state=0
		console.log(JSON.stringify(sa.value))
		proxy.$http.post('/saAdd',JSON.stringify(sa.value),{"headers":{"token":window.sessionStorage.getItem("token")}}) //按增加数据的接口组织url
		.then(res => {
			dialogVisible.value = false //关闭对话框		
			alert(res.data.message)
		})
	}
</script>

<style scoped>
img {
  width: 220px;
  height: 174px;
  margin: 0 24px 24px 0;
}
img:nth-of-type(3) {
  margin-right: 0;
}
</style>